<template>
    <el-card style="width: 100%;border-radius: 15px;" shadow="always">
        <div class="tableBox">
            <div class="tableTop">
                轧辊号
                &nbsp;
                <el-input v-model="form.productName" style="width: 240px" placeholder="请输入轧辊号" clearable />
                &nbsp;
                最大直径(mm)
                &nbsp;
                <el-input v-model="form.endProductDiameter" type="number" step="0.01" style="width: 240px"
                    placeholder="请输入最大直径" clearable />
                &nbsp;
                最小直径(mm)
                &nbsp;
                <el-input v-model="form.originProductDiameter" type="number" step="0.01" style="width: 240px"
                    placeholder="请输入最小直径" clearable />
                &nbsp;
                <el-button type="primary" size="mini" class="button" color="#36f" @click="selectDtat(1);">查询</el-button>
                <el-button type="primary" size="mini" class="button" color="#36f"
                    @click="selectDtat(2);">查询全部</el-button>
            </div>
            <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" :data="tableData" border
                class="table">
                <!-- <el-table-column prop="locationRegion" label="序号"></el-table-column> -->
                <el-table-column prop="locationRegion" label="位置区域"></el-table-column>
                <el-table-column prop="locationName" label="位置名称"></el-table-column>
                <el-table-column prop="productBoxRollNo" label="产品流水号"></el-table-column>
                <el-table-column label="位置状态" prop="statusAdjustment.statusChinese">
                    <template #default="scope">
                        <el-select v-model="scope.row.locationStatus" @change="(val) => { updData(scope.row, val) }"
                            placeholder="请选择状态">
                            <el-option label="空闲" :value="1" />
                            <el-option label="已占用" :value="2" />
                            <el-option label="存在辊架" :value="3" />
                            <el-option label="搬运辊架中" :value="4" />
                            <el-option label="允许放货" :value="5" />
                            <el-option label="存在轧辊" :value="6" />
                        </el-select>
                    </template>
                </el-table-column>
                <template v-slot:empty>
                    <el-empty description="暂无数据" />
                </template>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button type="primary" color="#36f" @click="selectProductName(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-bottom: 20px;" page-size="50" @current-change="handlePageChange" background
                layout="prev, pager, next" :total="count" />
            <el-dialog v-model="dialogVisible" title="辊框详情" width="80%" draggable>
                <el-table :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#666' }" :data="tableItem" border>
                    <el-table-column prop="productCardSlot" label="辊槽号"></el-table-column>
                    <el-table-column prop="productName" label="轧辊号"></el-table-column>
                    <el-table-column label="轧辊状态">
                        <template #default="scope">
                            <span v-if="scope.row.productStatus == 1">黑辊</span>
                            <span v-if="scope.row.productStatus == 2">白辊</span>
                            <span v-if="scope.row.productStatus == 3">异常辊</span>
                            <span v-if="scope.row.productStatus == 4">事故辊</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productDiameter" label="轧辊直径(mm)"></el-table-column>
                    <el-table-column label="轧辊类型">
                        <template #default="scope">
                            <span v-if="scope.row.rollType == 1">中间辊</span>
                            <span v-if="scope.row.rollType == 2">工作辊</span>
                            <span v-if="scope.row.rollType == 3">二中间辊</span>
                            <span v-if="scope.row.rollType == 4">支撑辊</span>
                        </template>
                    </el-table-column>
                    <template v-slot:empty>
                        <el-empty description="暂无数据" />
                    </template>
                </el-table>
            </el-dialog>
        </div>
    </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getTableLocationLocationName, updateTableLocationInfo } from '@/api'
import { Alex } from '@/types';
import { ElMessage, ElMessageBox } from 'element-plus';
const taskType = ref('1');
const page = ref(1)
const count = ref(0)
const name = ref('')
const tableData = ref([]);
const tableItem = ref([]);
const dialogVisible = ref(false);
const form = ref({
    rollType: 0,
    productName: null,
    endProductDiameter: 0,
    originProductDiameter: 0,
})
onMounted(() => {
    selectDtat(1)
})

const updData = (row: any, e: any) => {
    let alex = new Alex
    alex.parameter = {
        tableLocation: row
    }
    if (e == 1) {
        row.productBoxRollNo = ''
    }
    // delete alex.parameter.tableLocation.tableProductList
    // delete alex.parameter.tableLocation.statusAdjustment
    // delete alex.parameter.tableLocation.statusAdjustmentThree
    // delete alex.parameter.tableLocation.statusAdjustmentTwo

    updateTableLocationInfo(alex).then((res: any) => {
        selectDtat(1)
        ElMessage({
            message: '操作成功！',
            type: 'success',
        })
    })
}
const alex = new Alex

const selectDtat = (e: any) => {
    if (e == 1) {
        alex.parameter = form.value
        alex.parameter.endProductDiameter = parseFloat(alex.parameter.endProductDiameter).toFixed(2)
        alex.parameter.originProductDiameter = parseFloat(alex.parameter.originProductDiameter).toFixed(2)
    } else {
        alex.parameter.endProductDiameter = '0.00'
        alex.parameter.originProductDiameter = '0.00'
    }
    getTableLocationLocationName(alex).then((res: any) => {
        tableData.value = res.result.list
    })
}
const handlePageChange = (val: any) => {
    page.value = val;
    selectDtat(1);
}
const selectProductName = (row: any) => {
    tableItem.value = row.tableProductList
    dialogVisible.value = true
}
const dle = (row: any) => {
    let alex = new Alex
    alex.parameter = {
        id: row.eid
    }
    ElMessageBox.confirm(
        '确认删除?',
        '',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // deleteAgvCarryById(alex).then((res: any) => {
            //     ElMessage({
            //         message: '操作成功！',
            //         type: 'success',
            //     })
            //     selectDtat();
            // })
        })
}
</script>
<style scoped>
.table {
    height: 70vh;
    margin: 0px auto 20px auto;
    width: 98%;
}

span {
    cursor: pointer;
}

/* :deep(.el-input__wrapper) {
    background-color: #252547;
    border-color: #13132b;
    color: #fff;
    box-shadow: none;
}
*/
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
    background: #36f;
}

:deep(.el-card__body) {
    padding: 0;
}

.tableBox {
    box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
    border: 1px solid #e9e9eb;
    background-color: #ffffff;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.tableTop {
    width: 100%;
    margin-bottom: 20px;
    padding: 1.2rem;
    height: 32px;
    color: #323639;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid #e9e9eb;
}

.box {
    /* width: 1600px; */
    display: flex;
    height: 80vh;
    margin: 0 auto;
}

/* 
:deep(.el-table) {
    font-size: 12px;
    --el-table-border-color: #2e6099;
    border-radius: 4px;
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #2e6099;
}

:deep(.el-table--fit) {
    backdrop-filter: blur(1px);
    background-color: #222b45;
}

:deep(.el-table thead.is-group th.el-table__cell) {
    color: black;
    color: white;
    backdrop-filter: blur(1px);
    font-weight: bold;
}

:deep(.el-table th.el-table__cell) {
    backdrop-filter: blur(1px);
    background-color: #222b45;
}

:deep(.el-table thead.is-group th.el-table__cell:hover) {
    color: black;
}

:deep(.el-table tr) {
    background-color: #ffffff00;
    color: white;
}

:deep(.el-table tr:hover) {
    background-color: #222b45;
}

:deep(.el-table td:hover) {
    background-color: #222b45;
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover>td) {
    background-color: #323e61 !important;
} */
</style>